<template>
  <div>
      <!-- 搜索表单 -->
      <el-form :model="chargeType" inline>
          <el-form-item label="收费分类名称">
              <el-input v-model="chargeType.name" placeholder="请输入收费分类名称" clearable></el-input>
          </el-form-item>
          <el-button type="primary" @click="getChargeTypeList">搜索</el-button>
      </el-form>
      <el-button @click="handleAdd" type="primary" icon="Plus" plain>新增</el-button>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%;">
          <el-table-column type="selection" width="100" align="center"/>
          <el-table-column prop="id" label="ID" width="150" align="center"/>
          <el-table-column prop="name" label="收费标准名称" align="center"/>
          <el-table-column label="操作" align="center" width="200">
              <template #default="scope">
                  <el-button link  @click="handleEdit(scope.row)">
                      修改
                  </el-button>
                  <el-button link type="danger" @click="handleDelete(scope.row.id)">
                      删除
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 添加或修改弹框 -->
      <el-dialog
          :title="dialogTitle"
          v-model="dialogVisible"
          width="40%">
          <el-form :model="chargeType" label-width="100px">
              <el-form-item label="ID">
                  <el-input v-model="chargeType.id" placeholder="请输入ID" disabled></el-input>
              </el-form-item>
              <el-form-item label="收费标准名称">
                  <el-input v-model="chargeType.name" placeholder="请输入收费标准名称"></el-input>
              </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="close">取消</el-button>
                  <el-button type="primary" @click="handleSubmit">
                      {{ dialogTitle}}
                  </el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
// 表格数据
const tableData = ref([]);
// 弹框是否显示
const dialogVisible = ref(false);
// 弹框标题
const dialogTitle = ref('');
// 待保存或更新的收费标准数据
const chargeType = ref({
  id: '',
  name: ''
});

// 获取收费标准列表
const getChargeTypeList = () => {
  axios.get('/chargeType/list', {
      params: chargeType.value
  })
      .then(response => {
          let result = response.data;
          if (result.code == 1) {
              tableData.value = response.data.data.list;
              console.log(tableData.value);
          } else {
              console.log("获取收费标准失败");
          }
      });
};

onMounted(() => {
  getChargeTypeList();
});

// 删除收费标准
const handleDelete = (id) => {
  ElMessageBox.confirm('是否确认删除该收费标准?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
  })
      .then(() => {
          axios.delete('/chargeType/' + id)
              .then(response => {
                  let result = response.data;
                  if (result.code == 1) {
                      ElMessage.success('删除成功');
                      getChargeTypeList();
                  } else {
                      ElMessage.error('删除失败');
                  }
              });
      });
};

//进入修改页面
const handleEdit = (row) => {
 dialogVisible.value=true;
 dialogTitle.value='修改收费类型';
 chargeType.value=row; 
}
// 进入添加页面
const handleAdd = () => {
  dialogVisible.value = true;
  dialogTitle.value = '添加收费类型';
  chargeType.value = { id: '', name: '' }; // 清空表单数据
 
}
// 提交表单处理函数
const handleSubmit =() => {
  if(!chargeType.value.name?.trim()){
   ElMessage.error('请输入收费标准名称');
   return;
  }
  if(dialogTitle.value==='添加收费类型'){
   axios.post('/chargeType',chargeType.value)
   .then(response => {
    let result = response.data;
    if (result.code ===1) {
     ElMessage.success('添加成功');
     getChargeTypeList();
     dialogVisible.value = false;
     close();
    } else {
     ElMessage.error('添加失败');
     dialogVisible.value = false;
    }
   })
  .catch(error => {
    ElMessage.error('请求异常');
  })
  }else{
   axios.put('/chargeType',chargeType.value)
  .then(response => {
    const result = response.data; 
    if (result.code === 1) {
     ElMessage.success('修改成功');
     getChargeTypeList();
     dialogVisible.value = false; 
    }else{
     ElMessage.error('修改失败');
     dialogVisible.value = false;
    }
   });
   close();
  }
};

// 关闭弹框
const close = () => {
  dialogVisible.value = false;
  chargeType.value = { id: '', name: '' }; // 清空表单数据
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>